<template>
  <ph-view>
    <ph-blockquote type="primary">
      一些全局基础依赖的用法介绍
      如<strong>日期时间控件</strong>，<strong>颜色选择控件</strong>。。。
      <pre>
        import {
            <strong>PhModal</strong>,
            <strong>PhTooltip</strong>,
            <strong>PhToast</strong>,
            <strong>PhColorPicker</strong>,
            <strong>PhDatetimePicker</strong>,
            <strong>PhNotification</strong>,
            <strong>PhMessage</strong>,
            <strong>PhGLoading</strong>
            } from "phoeon"

        </pre
      >
    </ph-blockquote>
    <ph-tab>
      <ph-tab-panel title="日期时间控件">
        <ph-blockquote type="primary">
          import {PhDateTimePicker} from "phoeon"
          <br />
          该组件是作为日期时间选择器的基础控件，放在根组件，作为全局依赖，
          form之下的日期时间表单控件都是以此为基础的，所以，如果要使用form之下的日期时间选择控件，需要把PhDateTimePicker全局注册
        </ph-blockquote>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ datetimeUsage }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="颜色选择器控件">
        <ph-blockquote type="primary">
          import {PhColorPicker} from "phoeon"
          <br />
          该组件是作为颜色选择器的基础控件，放在根组件，作为全局依赖，
          form之下的取色表单控件都是以此为基础的，所以，如果要使用form之下的颜色选择控件，需要把PhColorPicker全局注册,
          具体如下代码
        </ph-blockquote>
      </ph-tab-panel>
      <ph-tab-panel title="其他">
        <ph-pretty>{{ others }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { PhTab, PhTabPanel, PhBlockquote, PhView } from "@/index";
import * as Data from "../data/global";
export default defineComponent({
  components: {
    PhTab,
    PhTabPanel,
    PhBlockquote,
    PhView,
  },
  setup() {
    return { ...Data };
  },
});
</script>
